<template>
	<view class="content">
		<view class="title">
			<view :class="['title-item', index === item.type ? 'active' : '']" v-for="(item, index1) in agreeMent"
				:key="index1" @tap="bindTap(item.type)">
				{{ item.title }}
			</view>
		</view>
		<view style="padding: 0rpx 40rpx 40rpx 40rpx; background-color: #FFFFFF;">
			<rich-text class="help-text" :nodes="agreeMent[index].content"></rich-text>
		</view>
	</view>
</template>

<script>
	import {
		getByType
	} from "../../api/hotel"
	export default {
		data() {
			return {
				agreeMent: [{
						title: "隐私政策",
						content: "隐私政策",
						type: 0,
						typeId: 4
					},
					{
						title: "服务协议",
						content: "服务协议",
						type: 1,
						typeId: 5
					}
				],
				index: 0,
				firstLoad: true
			}
		},
		onLoad() {
			this.getContent();
		},
		methods: {
			bindTap(index) {
				this.index = index

				if (index == 1 && this.firstLoad) {
					this.firstLoad = false
					this.getContent()
				}
			},
			getContent() {
				getByType({
					type: this.agreeMent[this.index].typeId
				}).then((res) => {
					const {
						data
					} = res
					//this.about.content = data.content
					this.agreeMent[this.index].content = data.content
				}).catch((err) => {
					console.log(err)
				})
			},
		}
	}
</script>

<style>
	.content {
		margin-top: 25rpx;
		background-color: #f7f7f7;
		/*min-height: 100vh;*/
	}

	.title {
		display: grid;
		grid-template-columns: 1fr 1fr;
		font-size: 28rpx;
		background-color: #FFFFFF;
		height: 70rpx;
	}

	.title-item {
		text-align: center;
	}

	.active {
		text-decoration: underline;
		text-underline-offset: 1rem;
		text-decoration-thickness: 0.2rem;
		text-decoration-color: rgb(15, 76, 151);
	}

	.text {
		text-indent: 2rem;
		margin-top: 2rem;
		font-size: 24rpx;
	}
</style>